<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js_lianxi</title>
	<style>
		.xian {display: block;}
		.yin {display: none;}

		div{width: 400px;height: 200px; color:white;}
		#div1{background-color: red;}
		#div2{background-color: blue;}

	</style>

	<script>
		function $(id){return document.getElementById(id)}
		window.onload=function (){
			$("but1").addEventListener("click",function (){
				$("div1").className = "xian";
				$("div2").className = "yin";
			})
			$("but2").addEventListener("click",function (){
				$("div2").className = "xian";
				$("div1").className = "yin";
			})
		}
	</script>
</head>
<body>
	<button id="but1">显示DIV1</button>
	<button id="but2">显示DIV2</button>
	<div>
		<div id="div1" class="xian">div1</div>
		<div id="div2" class="yin">dvi2</div>
	</div>
</body>
</html>